<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>摄影师管理</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div class="navbar">
      <div class="navbar-title">摄影师中心</div>
    </div>

    <div class="page-container">
      <!-- 摄影师信息卡片 -->
      <div class="card" style="background: linear-gradient(to right, #07c160, #39d080); color: white; position: relative; overflow: hidden;">
        <div class="card-content">
          <div class="flex items-center">
            <img src="https://img.freepik.com/free-photo/young-photographer-with-sunglasses-head_23-2148288301.jpg" alt="摄影师头像" class="avatar-lg" style="border: 3px solid rgba(255, 255, 255, 0.5);">
            <div style="margin-left: 15px;">
              <div style="font-size: 18px; font-weight: 500;">星辰摄影</div>
              <div class="rating" style="font-size: 14px; margin-top: 5px;">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
                <span style="color: white; margin-left: 5px;">4.5</span>
              </div>
              <div style="margin-top: 10px; font-size: 12px; padding: 2px 8px; background-color: rgba(255, 255, 255, 0.2); border-radius: 10px; display: inline-block;">
                认证摄影师
              </div>
            </div>
          </div>
          
          <div style="position: absolute; right: -20px; bottom: -20px; opacity: 0.2;">
            <i class="fas fa-camera" style="font-size: 100px;"></i>
          </div>
        </div>
      </div>

      <!-- 营收状况 -->
      <div class="card">
        <div class="card-content">
          <h3 style="margin-top: 0; font-size: 16px;">本月营收</h3>
          <div style="font-size: 24px; font-weight: 500; color: var(--primary-color); margin: 10px 0;">
            ¥1,299.00
          </div>
          <div style="font-size: 13px; color: var(--light-text);">
            较上月 <span style="color: var(--success-color);"><i class="fas fa-arrow-up"></i> 12%</span>
          </div>
          
          <div style="height: 1px; background-color: var(--border-color); margin: 15px 0;"></div>
          
          <div style="display: flex; text-align: center;">
            <div style="flex: 1; border-right: 1px solid var(--border-color);">
              <div style="font-size: 18px; font-weight: 500;">7</div>
              <div style="font-size: 13px; color: var(--light-text); margin-top: 5px;">本月订单</div>
            </div>
            <div style="flex: 1; border-right: 1px solid var(--border-color);">
              <div style="font-size: 18px; font-weight: 500;">2</div>
              <div style="font-size: 13px; color: var(--light-text); margin-top: 5px;">待处理</div>
            </div>
            <div style="flex: 1;">
              <div style="font-size: 18px; font-weight: 500;">28</div>
              <div style="font-size: 13px; color: var(--light-text); margin-top: 5px;">累计订单</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 当前接单状态 -->
      <div class="card">
        <div class="card-content">
          <div class="flex flex-between items-center">
            <h3 style="margin: 0; font-size: 16px;">当前接单状态</h3>
            <span class="status-badge status-available">空闲中</span>
          </div>
          
          <div style="margin-top: 15px;">
            <div style="margin-bottom: 10px; font-size: 14px;">调整您的接单状态：</div>
            <div style="display: flex; gap: 10px;">
              <button class="btn btn-primary" style="flex: 1; padding: 8px 0;" onclick="updatePhotographerStatus('空闲中')">空闲中</button>
              <button class="btn btn-outline" style="flex: 1; padding: 8px 0;" onclick="updatePhotographerStatus('即将空闲')">即将空闲</button>
              <button class="btn btn-outline" style="flex: 1; padding: 8px 0;" onclick="updatePhotographerStatus('已满')">已满</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 今日订单 -->
      <div class="card">
        <div class="card-content">
          <div class="flex flex-between items-center mb-2">
            <h3 style="margin: 0; font-size: 16px;">今日订单</h3>
            <span class="text-light" style="font-size: 12px;">查看全部 <i class="fas fa-chevron-right"></i></span>
          </div>
          
          <div style="border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; margin-bottom: 10px;">
            <div class="flex flex-between">
              <div style="font-weight: 500;">张三</div>
              <div class="text-primary">待拍摄</div>
            </div>
            <div style="margin-top: 5px; font-size: 13px; color: var(--light-text);">
              标准套餐 | 09:00
            </div>
            <div style="margin-top: 5px; font-size: 13px;">
              拍摄角色：初音未来 | 地点：A馆主会场
            </div>
            <div style="margin-top: 10px; display: flex; gap: 10px;">
              <button class="btn btn-outline" style="flex: 1; padding: 5px 0; font-size: 13px;">
                <i class="fas fa-phone-alt"></i> 联系客户
              </button>
              <button class="btn btn-primary" style="flex: 1; padding: 5px 0; font-size: 13px;">
                确认拍摄
              </button>
            </div>
          </div>
          
          <div style="border: 1px solid var(--border-color); border-radius: 8px; padding: 10px;">
            <div class="flex flex-between">
              <div style="font-weight: 500;">李四</div>
              <div style="color: var(--warning-color);">拍摄中</div>
            </div>
            <div style="margin-top: 5px; font-size: 13px; color: var(--light-text);">
              豪华套餐 | 11:00
            </div>
            <div style="margin-top: 5px; font-size: 13px;">
              拍摄角色：赛博朋克 | 地点：B馆展示区
            </div>
            <div style="margin-top: 10px; display: flex; gap: 10px;">
              <button class="btn btn-outline" style="flex: 1; padding: 5px 0; font-size: 13px;">
                <i class="fas fa-phone-alt"></i> 联系客户
              </button>
              <button class="btn btn-primary" style="flex: 1; padding: 5px 0; font-size: 13px;">
                完成拍摄
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 服务时段设置 -->
      <div class="card">
        <div class="card-content">
          <div class="flex flex-between items-center mb-2">
            <h3 style="margin: 0; font-size: 16px;">服务时段设置</h3>
            <button class="btn btn-outline" style="padding: 3px 10px; font-size: 12px;">
              <i class="fas fa-edit"></i> 编辑
            </button>
          </div>
          
          <div style="margin-bottom: 15px;">
            <div style="font-weight: 500; margin-bottom: 10px;">今日 (4/29)</div>
            <div class="flex" style="overflow-x: auto; padding-bottom: 5px; gap: 10px;">
              <div class="text-center" style="min-width: 60px; padding: 8px; border-radius: 8px; background-color: var(--primary-color); color: white;">
                <div>09:00</div>
                <div style="font-size: 12px;">已约</div>
              </div>
              <div class="text-center" style="min-width: 60px; padding: 8px; border-radius: 8px; background-color: var(--secondary-color); color: var(--light-text);">
                <div>10:00</div>
                <div style="font-size: 12px;">已约</div>
              </div>
              <div class="text-center" style="min-width: 60px; padding: 8px; border-radius: 8px; background-color: var(--primary-color); color: white;">
                <div>11:00</div>
                <div style="font-size: 12px;">已约</div>
              </div>
              <div class="text-center" style="min-width: 60px; padding: 8px; border-radius: 8px; background-color: var(--secondary-color); color: var(--light-text);">
                <div>13:00</div>
                <div style="font-size: 12px;">已约</div>
              </div>
              <div class="text-center" style="min-width: 60px; padding: 8px; border-radius: 8px; background-color: var(--primary-color); color: white;">
                <div>14:00</div>
                <div style="font-size: 12px;">空闲</div>
              </div>
              <div class="text-center" style="min-width: 60px; padding: 8px; border-radius: 8px; background-color: var(--primary-color); color: white;">
                <div>15:00</div>
                <div style="font-size: 12px;">空闲</div>
              </div>
            </div>
          </div>
          
          <div>
            <div style="font-weight: 500; margin-bottom: 10px;">明日 (4/30)</div>
            <div class="flex" style="overflow-x: auto; padding-bottom: 5px; gap: 10px;">
              <div class="text-center" style="min-width: 60px; padding: 8px; border-radius: 8px; background-color: var(--primary-color); color: white;">
                <div>09:00</div>
                <div style="font-size: 12px;">已约</div>
              </div>
              <div class="text-center" style="min-width: 60px; padding: 8px; border-radius: 8px; background-color: var(--primary-color); color: white;">
                <div>10:00</div>
                <div style="font-size: 12px;">空闲</div>
              </div>
              <div class="text-center" style="min-width: 60px; padding: 8px; border-radius: 8px; background-color: var(--primary-color); color: white;">
                <div>11:00</div>
                <div style="font-size: 12px;">空闲</div>
              </div>
              <div class="text-center" style="min-width: 60px; padding: 8px; border-radius: 8px; background-color: var(--primary-color); color: white;">
                <div>13:00</div>
                <div style="font-size: 12px;">空闲</div>
              </div>
              <div class="text-center" style="min-width: 60px; padding: 8px; border-radius: 8px; background-color: var(--primary-color); color: white;">
                <div>14:00</div>
                <div style="font-size: 12px;">空闲</div>
              </div>
              <div class="text-center" style="min-width: 60px; padding: 8px; border-radius: 8px; background-color: var(--primary-color); color: white;">
                <div>15:00</div>
                <div style="font-size: 12px;">空闲</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 快捷功能 -->
      <div class="card">
        <div class="card-content">
          <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; text-align: center;">
            <div>
              <div style="width: 45px; height: 45px; background-color: rgba(7, 193, 96, 0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                <i class="fas fa-camera text-primary" style="font-size: 18px;"></i>
              </div>
              <div style="font-size: 12px; margin-top: 5px;">作品管理</div>
            </div>
            
            <div>
              <div style="width: 45px; height: 45px; background-color: rgba(7, 193, 96, 0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                <i class="fas fa-calendar-alt text-primary" style="font-size: 18px;"></i>
              </div>
              <div style="font-size: 12px; margin-top: 5px;">排期管理</div>
            </div>
            
            <div>
              <div style="width: 45px; height: 45px; background-color: rgba(7, 193, 96, 0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                <i class="fas fa-comment-alt text-primary" style="font-size: 18px;"></i>
              </div>
              <div style="font-size: 12px; margin-top: 5px;">客户评价</div>
            </div>
            
            <div>
              <div style="width: 45px; height: 45px; background-color: rgba(7, 193, 96, 0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                <i class="fas fa-cog text-primary" style="font-size: 18px;"></i>
              </div>
              <div style="font-size: 12px; margin-top: 5px;">账户设置</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 作品管理 -->
      <div class="card">
        <div class="card-content">
          <div class="flex flex-between items-center mb-2">
            <h3 style="margin: 0; font-size: 16px;">我的作品</h3>
            <span class="text-light" style="font-size: 12px;">管理作品 <i class="fas fa-chevron-right"></i></span>
          </div>
          
          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;">
            <img src="https://img.freepik.com/free-photo/woman-with-face-paint-dia-de-los-muertos_23-2148241284.jpg" alt="作品照片" style="width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px;">
            <img src="https://img.freepik.com/free-photo/woman-with-traditional-asian-clothing_23-2148194201.jpg" alt="作品照片" style="width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px;">
            <img src="https://img.freepik.com/free-photo/stylish-girl-model-red-dress-studio_1321-3408.jpg" alt="作品照片" style="width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px;">
            <img src="https://img.freepik.com/free-photo/anime-cosplay-girl-posing-costume_23-2149374433.jpg" alt="作品照片" style="width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px;">
            <img src="https://img.freepik.com/free-photo/woman-elven-costume-photo-session_23-2149494284.jpg" alt="作品照片" style="width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px;">
            <div style="width: 100%; aspect-ratio: 1; background-color: var(--secondary-color); display: flex; justify-content: center; align-items: center; border-radius: 4px;">
              <i class="fas fa-plus" style="color: var(--light-text);"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 套餐管理 -->
      <div class="card">
        <div class="card-content">
          <div class="flex flex-between items-center mb-2">
            <h3 style="margin: 0; font-size: 16px;">套餐管理</h3>
            <button class="btn btn-outline" style="padding: 3px 10px; font-size: 12px;">
              <i class="fas fa-plus"></i> 新增
            </button>
          </div>
          
          <div style="border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; margin-bottom: 10px;">
            <div class="flex flex-between">
              <div style="font-weight: 500;">标准套餐</div>
              <div style="color: var(--primary-color);">¥199</div>
            </div>
            <div style="margin-top: 5px; font-size: 13px; color: var(--light-text);">
              30分钟拍摄，10张精修片，含电子档和打印
            </div>
            <div style="margin-top: 5px; display: flex; justify-content: flex-end; gap: 10px;">
              <button class="btn btn-outline" style="padding: 3px 10px; font-size: 12px;">
                <i class="fas fa-edit"></i> 编辑
              </button>
            </div>
          </div>
          
          <div style="border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; margin-bottom: 10px;">
            <div class="flex flex-between">
              <div style="font-weight: 500;">高级套餐</div>
              <div style="color: var(--primary-color);">¥299</div>
            </div>
            <div style="margin-top: 5px; font-size: 13px; color: var(--light-text);">
              60分钟拍摄，20张精修片，含电子档和打印，赠送精美相册
            </div>
            <div style="margin-top: 5px; display: flex; justify-content: flex-end; gap: 10px;">
              <button class="btn btn-outline" style="padding: 3px 10px; font-size: 12px;">
                <i class="fas fa-edit"></i> 编辑
              </button>
            </div>
          </div>
          
          <div style="border: 1px solid var(--primary-color); border-radius: 8px; padding: 10px;">
            <div class="flex flex-between">
              <div style="font-weight: 500;">豪华套餐</div>
              <div style="color: var(--primary-color);">¥499</div>
            </div>
            <div style="margin-top: 5px; font-size: 13px; color: var(--light-text);">
              120分钟拍摄，30张精修片，含电子档和打印，赠送精美相册和小型道具
            </div>
            <div style="margin-top: 5px; font-size: 12px; color: var(--primary-color);">
              <i class="fas fa-fire"></i> 热门套餐
            </div>
            <div style="margin-top: 5px; display: flex; justify-content: flex-end; gap: 10px;">
              <button class="btn btn-outline" style="padding: 3px 10px; font-size: 12px;">
                <i class="fas fa-edit"></i> 编辑
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据统计 -->
      <div class="card">
        <div class="card-content">
          <h3 style="margin-top: 0; font-size: 16px;">数据统计</h3>
          
          <div style="display: flex; flex-direction: column; gap: 15px;">
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <div>
                <div style="font-size: 13px; color: var(--light-text);">访问量</div>
                <div style="font-size: 18px; font-weight: 500; margin-top: 5px;">512</div>
              </div>
              <div style="color: var(--success-color); font-size: 12px;">
                <i class="fas fa-arrow-up"></i> 15%
              </div>
            </div>
            
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <div>
                <div style="font-size: 13px; color: var(--light-text);">收藏数</div>
                <div style="font-size: 18px; font-weight: 500; margin-top: 5px;">78</div>
              </div>
              <div style="color: var(--success-color); font-size: 12px;">
                <i class="fas fa-arrow-up"></i> 8%
              </div>
            </div>
            
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <div>
                <div style="font-size: 13px; color: var(--light-text);">平均评分</div>
                <div style="font-size: 18px; font-weight: 500; margin-top: 5px;">4.5</div>
              </div>
              <div style="color: var(--success-color); font-size: 12px;">
                <i class="fas fa-arrow-up"></i> 0.2
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="tabbar">
      <a href="#" class="tabbar-item">
        <i class="fas fa-calendar-alt tabbar-icon"></i>
        <span>排期</span>
      </a>
      <a href="#" class="tabbar-item">
        <i class="fas fa-file-alt tabbar-icon"></i>
        <span>订单</span>
      </a>
      <a href="#" class="tabbar-item active">
        <i class="fas fa-user tabbar-icon"></i>
        <span>我的</span>
      </a>
      <a href="#" class="tabbar-item">
        <i class="fas fa-camera tabbar-icon"></i>
        <span>作品</span>
      </a>
    </div>
  </div>

  <script src="js/main.js"></script>
</body>
</html> 